<template>
<div class="teansctionDet">
  <div class="teansctionDetHeader">
    <div class="left fl" @click='jump()'>
      <img src="~@/assets/images/back2x.png">
    </div>
    <div class="stockName">
      <div v-text='"交易明细" + "(" + $route.query.stockName + ")"'></div>
    </div>
  </div>
  <load-more :top-method="loadTop" :auto-fill="false" ref="loadMore">
    <div class="detTitle">
      <div class="picker">
        <popup-picker class="register-date_start-date-wrap" :data="registerDateStart.data" :value='registerDateStart.value' @onScroll='onRegDStartScroll' @change="startDateChange">
          <span class="init-money_value-wrap_value chooseDate" v-text='registerDateStart.value[0] +"年" + registerDateStart.value[1] +"月" +registerDateStart.value[2]+"日"'>
  					</span>
          <img src="~@/assets/images/date2x.png" alt="" />
        </popup-picker>
        <i>至</i>
        <popup-picker class="register-date_end-date-wrap" :data="registerDateEnd.data" :value='registerDateEnd.value' @onScroll='onRegDEndScroll' @change="endDateChange">
          <span class="register-date_end-date_value chooseDate" v-text='registerDateEnd.value[0] + "年" + registerDateEnd.value[1] +"月"+registerDateEnd.value[2] + "日"'></span>
          <img src="~@/assets/images/date2x.png" alt="" />
        </popup-picker>
      </div>
      <div class="detTitleLeft">
        <span>总盈亏</span>
        <i v-show='isText'>￥</i>
        <span v-text='queryConf.money' v-show='isText'></span>
        <div class="warningContainer" v-show='!isText'>
          - -
        </div>
      </div>
      <div class="detTitleRight">
        <span>持有天数</span>
        <span v-text='queryConf.holdDays' v-show='isText'></span>
        <i v-show='isText'>天</i>
        <div class="warningContainer" v-show='!isText'>
          - -
        </div>
      </div>
      <div class="wrongDate">
        <div class="warningContainer" v-show="isHint" v-text='reminder'></div>
      </div>
    </div>
    <div class="blank"></div>
    <div class="point">
      <span v-for='item,index in points'>
        <i :class="item[0]" class="smPoint"></i>
        <b v-text = 'item[1]'></b>
      </span>
    </div>
    <div class="kLine">
      <div ref="myKLine" style="width:100%;height:180px"></div>
    </div>
    <div class="blank"></div>
    <div class="kDetail">
      <span class="time" v-text='kLTraData'></span>
      <span class="inTimes">&nbsp;买入<i class="redColor" v-text =' KDetail[0]'></i>次，</span>
      <span class="outTimes">卖出<i class="greenColor" v-text =' KDetail[1]'></i>次，</span>
      <span class="inMoney">买入<i class="redColor" v-text =' KDetail[2]'></i>元，</span>
      <span class="outMoney">卖出<i class="greenColor" v-text =' KDetail[3]'></i>元</span>
    </div>
    <div class="title">
      <span class="fl">成交时间</span>
      <span class="fl">价格</span>
      <span class="fl">成交方向</span>
      <span class="fl">成交数量</span>
      <span class="fl">拥股数量</span>
      <span class="fl">成交金额</span>
    </div>
    <load-more :bottom-method="loadBottom" ref='loadmore'>
      <ul v-if='status == 0'>
        <li v-for='item,index in stockData'>
          <div class="time">
            <span v-text='item._source.bizdate'></span>
          </div>
          <div class="price" v-text='item._source.matchprice'></div>
          <div :class='item.textColor' v-text='item.digName'></div>
          <div :class='item.textColor' v-text='dataFormat(item._source.matchqty)'></div>
          <div class="haveNum" v-text='dataFormat(item._source.stkbal)'></div>
          <div class="amount" v-text='dataFormat(item._source.matchamt)'></div>
        </li>
      </ul>
    </load-more>
    <return-empty v-if='status == 1'></return-empty>
    <return-error v-if='status == 2'></return-error>
  </load-more>
</div>
</template>

<script>
import PopupPicker from '@/components/popup-picker'
import RemoteDAO from '@/common/remoteDAO'
import LoadMore from '@/components/common/LoadMore'
import Jquery from 'jquery'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/candlestick'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import Cache from '@/common/cache'

import 'echarts/lib/component/markPoint'

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    },
    confine: true,
    backgroundColor: 'rgba(0,0,0,.4)',
    textStyle: {
      color: '#fff',
      fontSize: '12'
    }
  },
  grid: {
    left: '0%',
    right: '0%',
    top: '0%',
    bottom: '12%'
  },
  xAxis: {
    type: 'category',
    scale: true,
    boundaryGap: true,
    axisLine: {
      onZero: false,
      lineStyle: {
        color: '#c9daeb'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#999'
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: [{
    scale: true,
    splitNumber: 1,
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dotted',
        color: '#bac9d8'
      }
    }
  }, {
    splitNumber: 1,
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: '#bac9d8'
      }
    }
  }],
  color: ['#ff7c00'],
  series: [{
      type: 'candlestick',
      legendHoverLink: false,
      barWidth: '70%',
      itemStyle: {
        normal: {
          color: '#eb333b',
          color0: '#1aae52',
          borderColor: '#eb333b',
          borderColor0: '#1aae52'
        }
      }
    },
    {
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        normal: {
          width: 1.5
        }
      }
    }
  ]
};
export default {
  data() {
    return {
      queryConf: {
        pagenum: '20',
        pagesize: '1',
        bizdate: '',
        stkcode: '',
        holdDays: '',
        money: ''
      },
      isHint: '',
      reminder: '',
      nowDate: '',
      years: [],
      months: [],
      days: [],
      weeks: ['', '', '', '', '', '', ''],
      stockData: [],
      timeStart: '',
      points: [
        ['cBLine', '成本线'],
        ['buyIn', '买入'],
        ['sellOut', '卖出'],
        ['buySell', '买卖']
      ],
      kLineData: [],
      LDataMax: [],
      LDetail: [],
      kLTraData: '20130302',
      lineData: [],
      KDetail: [0, 0, 0, 0],
      timeEnd: '',
      status: 0,
      isText: '',
      registerDateStart: {
        data: [
          [{
            name: '2017年',
            value: '2017'
          }, {
            name: '2018年',
            value: '2018'
          }],
          [{
            name: '1月',
            value: '1'
          }, {
            name: '2月',
            value: '02'
          }],
          [{
            name: '1日 星期六',
            value: '1'
          }, {
            name: '2日 星期日',
            value: '02'
          }]
        ],
        value: ['2018', '02', '02']
      },
      registerDateEnd: {
        data: [
          [{
            name: '2017年',
            value: '2017'
          }, {
            name: '2018年',
            value: '2018'
          }],
          [{
            name: '1月',
            value: '1'
          }, {
            name: '2月',
            value: '02'
          }],
          [{
            name: '1日 星期六',
            value: '1'
          }, {
            name: '2日 星期日',
            value: '02'
          }]
        ],
        value: ['2018', '02', '02']
      }
    }
  },
  components: {
    PopupPicker,
    LoadMore
  },
  mounted() {
    TDAPP.onEvent('002030', '');
    TDAPP.send();

    this.init();
  },
  methods: {
    loadTop() {
      this.teanRefresh();
      this.$refs.loadMore.onTopLoaded();
    },
    teanRefresh() {
      this.reSearch();
      TDAPP.onEvent('002023', '');
      TDAPP.send();
      TDAPP.onEvent('002030', '');
      TDAPP.send();
      let obj0047 = {
        "tradedate": this.queryConf.bizdate,
        'stock_code': this.queryConf.stkcode,
        'market_code': this.$route.query.marketCode
      }
      RemoteDAO.callZL13100047(obj0047, this.ZL13100047);
      let obj0046 = {
        'tradedate': this.$route.query.recentThr,
        'stock_code': this.queryConf.stkcode,
        'market_code': this.$route.query.marketCode
      };
      RemoteDAO.callZL13100046(obj0046, this.ZL13100046);
    },
    startDateChange(val) {
      this.registerDateStart.value = val;
      let startNum = parseFloat(val.join(''))
      let endNum = parseFloat(this.registerDateEnd.value.join(''))
      let nowTime = parseFloat(this.nowDate)
      if (startNum > endNum && startNum < nowTime) {
        this.isHint = 'true'
        this.reminder = '开始日期不得晚于结束日期哟!'
      } else if (startNum > endNum && startNum > nowTime) {
        this.isHint = 'true'
        this.reminder = '未来时间不可选哦!'
      } else {
        this.isHint = '';
        this.timeStart = '' + this.registerDateStart.value[0] + this.registerDateStart.value[1] + this.registerDateStart.value[2] + '~' +
          this.registerDateEnd.value[0] + this.registerDateEnd.value[1] + this.registerDateEnd.value[2];
        this.queryConf.bizdate = this.timeStart;

        let obj0047 = {
          "tradedate": this.queryConf.bizdate,
          'stock_code': this.queryConf.stkcode,
          'market_code': this.$route.query.marketCode
        }
        RemoteDAO.callZL13100047(obj0047, this.ZL13100047);

        this.reSearch();
      }
    },
    endDateChange(val) {
      this.registerDateEnd.value = val;
      let startNum = parseFloat(this.registerDateStart.value.join(''))
      let endNum = parseFloat(val.join(''))
      let nowTime = parseFloat(this.nowDate)
      if (startNum > endNum && endNum < nowTime) {
        this.isHint = 'true'
        this.reminder = '结束日期不得早于开始日期哟!'
      } else if (endNum > nowTime) {
        this.isHint = 'true'
        this.reminder = '未来时间不可选哦!'
      } else {
        this.isHint = '';
        this.timeEnd = '' + this.registerDateStart.value[0] + this.registerDateStart.value[1] + this.registerDateStart.value[2] + '~' +
          this.registerDateEnd.value[0] + this.registerDateEnd.value[1] + this.registerDateEnd.value[2];
        this.queryConf.bizdate = this.timeEnd;

        let obj0047 = {
          "tradedate": this.queryConf.bizdate,
          'stock_code': this.queryConf.stkcode,
          'market_code': this.$route.query.marketCode
        }
        RemoteDAO.callZL13100047(obj0047, this.ZL13100047);

        this.reSearch();
      }
    },
    reSearch() {
      let vm = this;

      vm.queryConf.pagesize = 1;
      if (vm.$refs.loadmore) {
        vm.$refs.loadmore.reset();
      }
      vm.stockData = [];
    },
    loadBottom() {
      let vm = this;

      vm.fetchData(function(allLoaded, error) {
        if (vm.$refs.loadmore) {
          if (error !== null) {
            vm.$refs.loadmore.onBottomError(error); //单次加载失败或者没有数据，error为报错信息，如果是没有数据，写暂无数据
          } else if (allLoaded) {

            vm.$refs.loadmore.onBottomAllLoaded(); //全部数据加载完成
          } else {
            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
          }
        }
      });
    },
    fetchData(afterFetchData) {
      let vm = this,
        allLoaded = false,
        error = null;

      RemoteDAO.callZL13100016(vm.queryConf, (result) => {
        if (result.error == '1') {
          vm.status = 2;
          error = ''
        } else {
          let data = result.data;
          let bigdata = JSON.parse(data).body[0].bigdata;
          let hits = JSON.parse(bigdata).hits.hits;
          if (hits.length == 0) {
            vm.status = 1;
            error = ''
          } else {
            hits.forEach(function(item, index) {
              let digName = hits[index]._source.digestname.substr(2, 2)
              let redColor = 'redColor'
              let greenColor = 'greenColor'
              let blackColor = 'blackColor'
              if (digName == '买入') {
                item.textColor = redColor;
              } else if (digName == '卖出') {
                item.textColor = greenColor;
              } else {
                item.textColor = blackColor;
              }
              item.digName = digName;

            });

            vm.stockData = vm.stockData.concat(hits);
            vm.queryConf.pagesize++;
            if (vm.stockData.length == 0) {
              error = '暂无数据'
            } else if (hits.length < vm.queryConf.pagenum) {
              allLoaded = true
            }
          }
        }

        afterFetchData(allLoaded, error);
      })
    },
    dataFormat(val) { //item._source.matchqty,stkbal,matchamt
      let data = parseFloat(val);

      if (data > 100000 && data < 100000000) {
        return (data / 10000).toFixed(2) + '万'
      } else if (data > 100000000) {
        return (data / 100000000).toFixed(2) + '亿'
      } else if (data < -100000 && data > -100000000) {
        return (data / 10000).toFixed(2) + '万'
      } else if (data < -100000000) {
        return (data / 100000000).toFixed(2) + '亿'
      } else {
        return data;
      }
    },
    jump() {
      this.$router.replace('/pages/Stock')
    },
    splitData(rawData) {
      var categoryData = [];
      var values = []
      for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
      }
      return {
        categoryData: categoryData,
        values: values
      };
    },
    init() {
      // let myHref = window.location.href;
      this.queryConf.stkcode = this.$route.query.stock;
      this.queryConf.bizdate = this.$route.query.time;
      this.initPicker();
      let obj0047 = {
        "tradedate": this.queryConf.bizdate,
        'stock_code': this.queryConf.stkcode,
        'market_code': this.$route.query.marketCode
      }
      RemoteDAO.callZL13100047(obj0047, this.ZL13100047);
      let obj0046 = {
        'tradedate': this.$route.query.recentThr,
        'stock_code': this.queryConf.stkcode,
        'market_code': this.$route.query.marketCode
      };
      RemoteDAO.callZL13100046(obj0046, this.ZL13100046);
    },
    KLine(result) {
      let vm = this
      if (result.error == '1') {
        console.log('错误');
      } else {
        let arr = [],
          res = result.data,
          lIndex = [];

        res.date.forEach((item, index) => {
          arr.push([item, res.open[index], res.close[index], res.min[index], res.max[index]])
        });
        if (res.date.length < 60) {
          for (var i = 0; i < 60 - res.date.length; i++) {
            arr.push(['', '', '', ''])
          }
        }
        let markPointArr = [];
        vm.kLineData = vm.splitData(arr)

        this.$nextTick(() => {
          if (!vm.kLineChart) {
            vm.kLineChart = echarts.init(vm.$refs.myKLine);
            vm.kLineChart.setOption(option)
          }

          let max = Math.max.apply(vm, result.data.max) + 0.4,
            min = Math.min.apply(vm, result.data.min) - 0.4;
          vm.lineData.forEach((item, index) => {
            let color = '',
              status = '',
              offect = [],
              symbolSize = 5.5,
              kIndex = res.date.indexOf(item[0]);
            res.open[kIndex] < res.close[kIndex] ? status = 0 : status = 1;
            if (item[2] == 'B') {
              color = '#eb333b'
              status == 1 ? offect = [0, '150%'] : offect = [0, '110%']
              res.open[kIndex] - res.close[kIndex] > 0.1 ? offect = [0, 25] : offect = [0, '150%']
            } else if (item[2] == 'S') {
              color = '#1aae52'
              status == 1 ? offect = [0, '200%'] : offect = [0, '120%']
              res.open[kIndex] - res.close[kIndex] > 0.1 ? offect = [0, 25] : offect = [0, '200%']
            } else if (item[2] == 'T') {
              color = '#6f88a0';
              status == 1 ? offect = [0, '220%'] : offect = [0, '100%']
              res.open[kIndex] - res.close[kIndex] > 0.05 ? offect = [0, 4 * Math.floor(res.open[kIndex])] : offect = [0, '220%']
            }
            markPointArr.push({
              coord: [item[0], res.open[res.date.indexOf(item[0])]],
              value: item[2],
              symbolSize: (value, params) => {
                return symbolSize
              },
              symbolOffset: offect,
              silent: true,
              itemStyle: {
                normal: {
                  color: color
                }
              }
            })
          });
          markPointArr.push({
            type: 'max',
            symbolSize: 5,
            x: 20,
            y: 7,
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: '#999'
                }
              }
            }
          }, {
            type: 'min',
            symbolSize: 5,
            x: 20,
            y: 150,
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: '#999'
                }
              }
            }
          })
          let lMax = '',
            lMin = '';
          vm.LDataMax.length == 0 ? lMax = max : lMax = Math.ceil(Math.max.apply(vm, vm.LDataMax)) + 1;
          vm.LDataMax.length == 0 ? lMin = min : lMin = Math.floor(Math.min.apply(vm, vm.LDataMax)) - 1;
          vm.kLineChart.setOption({
            tooltip: {
              formatter: (params) => {
                vm.kLTraData = params[0].name
                params.length == 2 ? vm.KDetail = [params[1].data[3], params[1].data[4], params[1].data[5], params[1].data[6]] :
                  vm.KDetail = [0, 0, 0, 0];
                if (params.length == 1) {
                  if (params[0].dataIndex > res.date.length - 1) {
                    return ''
                  } else {
                    return `
                <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0)"></div>&nbsp;&nbsp;
                ${params[0].axisValue}<br/>
                  <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0)"></div>&nbsp;
                  最高价：${params[0].data[4]}元<br/>
                  <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0)"></div>&nbsp;
                  最低价：${params[0].data[3]}元`
                  }
                } else {
                  return `
                      <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0)"></div>&nbsp;&nbsp;
                      ${params[0].axisValue}<br/>
                        <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:#fb8a3f"></div>&nbsp;
                        成本价：${params[1].data[1]}元<br/>
                        <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0)"></div>&nbsp;
                        最高价：${params[0].data[4]}元<br/>
                        <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0)"></div>&nbsp;
                        最低价：${params[0].data[3]}元`
                }
              }
            },
            xAxis: {
              data: vm.kLineData.categoryData,
              axisLabel: {
                textStyle: {
                  algin: 'center',
                  color: '#999'
                },
                formatter: (val, index) => {
                  if (index == 6 || index == vm.kLineData.values.length - 8) {
                    return val
                  } else {
                    return ''
                  }
                }
              }
            },
            yAxis: [{
              max: max,
              min: min,
              interval: (max - (max + min) / 2)
            }, {
              max: lMax,
              min: lMin,
              interval: lMax - lMin + 2
            }],
            series: [{
              data: vm.kLineData.values,
              markPoint: {
                symbol: 'circle',
                label: {
                  normal: {
                    formatter: (params) => {
                      if (params.data.type == 'max') {
                        return Math.max.apply(vm, result.data.max)
                      } else if (params.data.type == 'min') {
                        return Math.min.apply(vm, result.data.min)
                      } else {
                        return ''
                      }
                    }
                  }
                },
                data: markPointArr
              }
            }, {
              yAxisIndex: 1,
              data: vm.lineData
            }]
          })
        })
      }
    },
    ZL13100047(result) {
      let vm = this;
      vm.isText = true
      if (result.error == '1') {
        vm.isText = false
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).aggregations;
        if (specData.length == 0) {
          vm.isText = false
        } else {
          this.queryConf.money = parseFloat(specData.sum_day_profit.value.toFixed(2))

          if (Math.abs(this.queryConf.money) > 100000) {
            Math.abs(this.queryConf.money) < 100000000 ? this.queryConf.money = (this.queryConf.money / 10000).toFixed(2) + '万' :
              this.queryConf.money = (this.queryConf.money / 100000000).toFixed(2) + '亿'
          }

          this.queryConf.holdDays = specData.sum_is_hold.value
        }
      }
    },
    ZL13100046(result) {
      let vm = this;
      if (result.error == '1') {
        console.log('错误');
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        if (specData.length == 0) {
          console.log('无数据');
        } else {
          vm.lineData = [];
          vm.kStatus = [];
          vm.LDataMax = [];
          specData.forEach((item, index) => {
            vm.lineData.push(
              [String(item._source.tradedate),
                item._source.profit_cost_price,
                item._source.bst_flag,
                item._source.in_match_cnt,
                item._source.out_match_cnt,
                item._source.in_match_amt,
                item._source.out_match_amt
              ]
            )
            vm.LDataMax.push(item._source.profit_cost_price)
          });
        }
      }
      RemoteDAO.callNativeKLine(this.$route.query.stockNumber, vm.KLine)
    },
    initPicker() {
      let today = new Date();
      let year = today.getFullYear();
      let month = today.getMonth();
      let day = today.getDate();
      let nowDay = today.getDate() < 9 ? '0' + (today.getDate()) : '' + (today.getDate());
      let nowMonth = today.getMonth() < 9 ? '0' + (today.getMonth() + 1) : '' + (today.getMonth() + 1);
      this.nowDate = year + '' + nowMonth + '' + nowDay
      let i;
      let time = this.$route.query.time;
      let timeArr = time.split('~');
      let startYear = timeArr[0].substr(0, 4)
      let startMonth = timeArr[0].substr(4, 2)
      let startDay = timeArr[0].substr(6, 2)
      let endYear = timeArr[1].substr(0, 4)
      let endMonth = timeArr[1].substr(4, 2)
      let endDay = timeArr[1].substr(6, 2)
      for (i = -1; i < 2; i++) {
        let tempY = year + i;
        this.years.push({
          name: tempY + '年',
          value: tempY + ''
        });
      };
      for (i = 0; i < 12; i++) {
        this.months.push({
          name: i + 1 + '月',
          value: i < 9 ? '0' + (i + 1) : i + 1 + ''
        });
      };
      let dayIndex = today.getDate() - 1;
      this.registerDateStart.data = [this.years, this.months, this.getDays(year, month)];
      this.registerDateEnd.data = [this.years, this.months, this.getDays(year, month)];
      this.registerDateStart.value = [
        startYear,
        startMonth,
        startDay
      ];
      this.registerDateEnd.value = [
        endYear,
        endMonth,
        endDay
      ];
    },
    getDays: function(year, month) {
      year = parseInt(year);
      month = parseInt(month);
      let isRN = 0;
      if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) isRN = 1;
      let monthsDay = [31, 28 + isRN, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      let days = [],
        tempToday = new Date(year, month);
      for (let i = 0; i < monthsDay[month]; i++) {
        tempToday.setDate(i + 1);
        days.push({
          name: i + 1 + ' ' + this.weeks[tempToday.getDay()],
          value: (i + 1) < 10 ? '0' + (i + 1) : i + 1 + ''
        });
      }
      return days;
    },
    onRegDStartScroll: function(val) {
      this.registerDateStart.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
    },
    onRegDEndScroll: function(val) {
      this.registerDateEnd.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
    }
  }
}
</script>

<style scoped>
.teansctionDet {
  font-size: 24px;
  margin-bottom: 0;
}

.detTitle {
  width: 100%;
  height: 260px;
  font-size: 28px;
  background-image: url('../../../assets/images/jymx_banner.png');
  background-size: 100%;
  text-align: center;
  color: #fff;
}

.hint {
  display: block;
  color: red;
  margin-top: 20px;
}

.picker i {
  margin: 0 30px;
}

.detTitle .chooseDate {
  text-align: left;
  display: inline-block;
  width: 250px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-top: 40px;
  padding-left: 10px;
  font-size: 28px;
}

.detTitle img {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: -30px;
  vertical-align: middle;
}

.detTitleLeft,
.detTitleRight {
  width: 45%;
  display: inline-block;
  margin-top: 14px;
}

.detTitleLeft span:first-child,
.detTitleRight span:first-child {
  display: block;
  margin-bottom: 10px;
}

.detTitleLeft span:nth-child(3),
.detTitleRight span:nth-child(2) {
  font-size: 48px;
}

.blank {
  height: 20px;
  background-color: #f0f0f0;
  box-shadow: inherit 0 -1px 0 0 #ddd, inherit 0 -1px 0 0 #ddd;
}

.point {
  height: 60px;
  padding-left: 25px;
  line-height: 60px;
  background-color: white;
  padding-bottom: 1px;
}

.point>span {
  display: inline-block;
  text-align: center;
  width: 15%;
  height: 60px;
  background-color: white;
}

.point .cBLine {
  background-color: #ff7c00
}

.point .buyIn {
  background-color: #eb333b
}

.point .sellOut {
  background-color: #1aae52
}

.point .buySell {
  background-color: #6f88a0
}

.point .smPoint {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.info {
  display: inline-block;
  width: 100%;
  padding-left: 20px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ddd;
}

.info i:first-child {
  color: #ddd;
}

.info i:nth-child(n+2) {
  color: green;
}

.info b {
  color: #E31A2E;
}

.title {
  height: 80px;
  line-height: 80px;
  font-size: 24px;
  color: #555;
  padding-left: 5px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  background-color: white;
}

.title span {
  display: inline-block;
  width: 16%;
}

.title span:nth-child(n+2) {
  text-align: center;
}

.kDetail {
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  font-size: 24px;
  background-color: white;
  color: #555;
  border-bottom: 1px solid #ddd;
}

.kDetail .time {
  color: #999;
}

ul li {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  padding-left: 5px;
  display: block;
  background-color: white;
  border-bottom: 1px solid #ddd;
  color: #222;
}

ul li>div {
  width: 16%;
  height: 100%;
  float: left;
}


.time {
  font-size: 28px;
  text-align: center;
}

.time span {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 80px;
}

.redColor {
  color: #e31a2e;
}

.greenColor {
  color: #1ea241;
}

.blackColor {
  color: black;
}


/*picker*/

.register-date_start-date-wrap {
  color: white;
  border-radius: 3px;
  display: inline-block;
  min-width: 109px;
}

.register-date_start-date-wrap i {
  color: white;
  font-size: 14px;
  border-radius: 2px;
  background-color: rgba(95, 170, 232, 1);
  float: right;
  padding: 0 8px;
}

.register-date_end-date-wrap {
  color: white;
  border-radius: 3px;
  display: inline-block;
  min-width: 109px;
}

.register-date_end-date-wrap i {
  color: white;
  font-size: 14px;
  border-radius: 2px;
  background-color: rgba(95, 170, 232, 1);
  float: right;
  padding: 0 8px;
}

.teansctionDetHeader {
  position: relative;
  width: 100%;
  height: 88px;
  background-image: url(~@/assets/images/headerBgImage.png);
  background-size: 100%;
  color: #fff;
  margin-top: 0;
  text-align: center;
  z-index: 99;
}

.left {
  margin-top: 26px;
}

.left img {
  height: 36px;
  margin-left: 30px;
}

.stockName {
  font-size: 36px;
  line-height: 88px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

.wrongDate {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrongDate .warningContainer {
  height: 100%;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  color: #fff;
  border-radius: 4px;
}

.right {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 26px;
}

.right img {
  height: 36px;
  margin-right: 30px;
}

.kLine {
  background-color: white;
}
</style>
